<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格增删改除</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		
		<script type="text/javascript">
			
			function delA(){
					// 点击超链接后需要删除超链接所在的行
					// 点击超链接,谁点this就是谁
					// 获取当前tr
					var tr = this.parentNode.parentNode;
					// 获取要删除的员工名字
					// var name = tr.getElementsByTagName("td")[0].innerHTML;
					var name = tr.children[0].innerHTML;
					
					// 点击确定就删除,点击取消不删除
					var con = confirm("确定需要删除"+name+"吗？？");
					if(con){
						// 删除tr
						tr.parentNode.removeChild(tr);
					}
					return false;
			}
			
			function clearInput(){
				document.getElementById("empName").value=document.getElementById("email").value=document.getElementById("salary").value=''
			}
			
			window.onload = function(){
				
				// 获取所有a的超链接
				var allA = document.getElementsByTagName("a");
				
				// 遍历所有的a
				for(var i=0; i<allA.length; i++){
					// 为a绑定单击响应函数
					allA[i].onclick =delA;
				}
				
				// 添加员工的功能
				// 点击按钮后将员工信息添加到表格中
				var btn = document.getElementById("addEmpButton");
				btn.onclick = function(){
					// alert("11111");
					
					// 获取员工填写的name/email/salary文本
					var name = document.getElementById("empName").value;
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;
					// 判断内容是否为空
					if(name==''){
						alert('内容不能为空!')
					}else{
						/*需要将获取到的信息保存到tr中
						 *  <tr>
								<td>Tom</td>
								<td>tom@tom.com</td>
								<td>5000</td>
								<td><a href="javascript:;">Delete</a></td>
							</tr>
						 */
						// 第一种方法,代码长
						// 创建tr
						/* var tr = document.createElement("tr");
						// 创建四个td
						var nameTd = document.createElement("td");
						var emailTd = document.createElement("td");
						var salaryTd = document.createElement("td");
						var aTd = document.createElement("td");
						// 创建超链接
						var a = document.createElement("a");
						// 在a里面添加属性href
						a.href = "javascrip:;";
						
						// 为新的a绑定响应函数
						a.onclick = delA;
						
						// 创建文本节点
						var nameText = document.createTextNode(name);
						var emailText = document.createTextNode(email);
						var salaryText = document.createTextNode(salary);
						var aText = document.createTextNode("Delete");
						// 将文本节点放入td中
						nameTd.appendChild(nameText);
						emailTd.appendChild(emailText);
						salaryTd.appendChild(salaryText);
						// 将文本节点放入a中再放入td中
						a.appendChild(aText);
						aTd.appendChild(a);
						// 将td添加到tr中
						tr.appendChild(nameTd);
						tr.appendChild(emailTd);
						tr.appendChild(salaryTd);
						tr.appendChild(aTd);
						// 测试alert(tr.innerHTML); */
						
						// 第二种方法
						// 创建一个tr,推荐使用
						var tr = document.createElement("tr");
						tr.innerHTML = "<td>"+name+"</td>"+
											"<td>"+email+"</td>"+
											"<td>"+salary+"</td>"+
											"<td><a href=javascrip:;>Delete</a></td>";
						// 获取刚刚创建好的tr里面的a元素
						var a = tr.getElementsByTagName("a")[0];
						a.onclick = delA;
						
						// 获取table元素,可写可不写
						var employeeTable = document.getElementById("employeeTable");
						// 获取tbody元素
						var empTbody = employeeTable.getElementsByTagName("tbody")[0];
						// 在table里面加入tr
						// employeeTable.appendChild(tr);
						// 在tbody里面加入tr
						empTbody.appendChild(tr);
						
						// 第三种方法,不推荐使用
						/* empTbody.innerHTML += "<tr>"+
										"<td>"+name+"</td>"+
										"<td>"+email+"</td>"+
										"<td>"+salary+"</td>"+
										"<td><a href='javascript:;'>Delete</a></td>"
										+"</tr>"; */
					}
					// 添加完毕后清空内容
					clearInput();
				}
			}
			
		</script>
		
	</head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@sohu.com</td>
				<td>5000</td>
				<td><a href="javascrip:;">Delete</a></td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td><a href="javascrip:;">Delete</a></td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td><a href="javascrip:;">Delete</a></td>
			</tr>
		</table>
		
		<div id="formDiv">
			<h4>添加新员工</h4>
			
			<table>
				<tr>
					<td class="word">Name:</td>
					<td class="inp">
						<input type="text" name="empName" id="empName" />
					</td>
				</tr>
				<tr>
					<td class="word">Email:</td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					</td>
				</tr>
				<tr>
					<td class="word">Salary:</td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />
					</td>
				</tr>
				<tr>
					<td colspan="2" class="btn">
						<button id="addEmpButton" value="abcd">Submit</button>
					</td>
				</tr>
			</table>
			
		</div>
	</body>
</html>
